{% extends layout %}
{% from "components/macros/layout.html" import sidebar_icon, theme_toggle %}
{% block app_content %}
<div x-data="{ mobileNav: false, sidebar: appearance().sidebar }" class="min-h-screen md:flex">
  <aside id="overseer-sidebar" aria-label="Overseer navigation"
         class="w-full md:w-64 lg:w-72 md:shrink-0 md:h-screen md:sticky md:top-0 md:z-30 md:transition-[width] border-b md:border-b-0 md:border-r border-aegis-border bg-aegis-bg flex flex-col">
    <div class="overseer-rail-row px-5 py-5 border-b border-aegis-border flex items-center justify-between gap-3">
      <a href="/overseer" hx-get="/overseer" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
         title="Overseer" class="min-w-0 text-sm font-semibold text-aegis-text truncate">
        <span class="text-aegis-teal" aria-hidden="true">●</span>
        <span class="overseer-rail-hide">Overseer</span>
        <span class="overseer-rail-none block ml-4 text-xxs font-normal text-aegis-muted truncate">{{ project_name }}</span>
      </a>
      <button type="button" class="md:hidden rounded border border-aegis-border px-2 py-1 text-xs text-aegis-muted"
              @click="mobileNav = !mobileNav" :aria-expanded="mobileNav" aria-controls="overseer-nav">Menu</button>
    </div>
    <nav id="overseer-nav" aria-label="Components and services"
         class="px-3 py-4 space-y-5 md:block md:flex-1 md:min-h-0 md:overflow-y-auto"
         :class="mobileNav ? 'block' : 'hidden'">
      <div>
        <a href="/overseer" title="Overview" hx-get="/overseer" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
           {% if item is not defined %}aria-current="page"{% endif %}
           class="overseer-rail-row nav-link py-2">
          {{ sidebar_icon("overview") }}<span class="overseer-rail-hide truncate">Overview</span>
        </a>
        <a href="/overseer/patterns" title="Patterns" hx-get="/overseer/patterns" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
           {% if item is defined and item.group == "patterns" %}aria-current="page"{% endif %}
           class="overseer-rail-row nav-link py-2">
          {{ sidebar_icon("patterns") }}<span class="overseer-rail-hide truncate">Patterns</span>
        </a>
        {% if secrets_page() == "/overseer/secrets" %}{# with the component, it lives under Components #}
        <a href="/overseer/secrets" title="Secrets" hx-get="/overseer/secrets" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
           {% if item is defined and item.group == "secrets" %}aria-current="page"{% endif %}
           class="overseer-rail-row nav-link py-2">
          {{ sidebar_icon("secrets") }}<span class="overseer-rail-hide truncate">Secrets</span>
        </a>
        {% endif %}
        <a href="/overseer/settings" title="Settings" hx-get="/overseer/settings" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
           {% if item is defined and item.group == "settings" %}aria-current="page"{% endif %}
           class="overseer-rail-row nav-link py-2">
          {{ sidebar_icon("settings") }}<span class="overseer-rail-hide truncate">Settings</span>
        </a>
      </div>
      {% for group, heading in [("components", "Components"), ("services", "Services")] %}
      {% if navigation[group] %}
      <section aria-labelledby="overseer-{{ group }}-heading">
        <h2 id="overseer-{{ group }}-heading" class="overseer-rail-none micro-label text-aegis-muted px-3 mb-2">{{ heading }}</h2>
        <ul class="space-y-0.5">
          {% for entry in navigation[group] %}
          {% set selected = item is defined and item.group == group and item.name == entry.name %}
          <li><a href="{{ entry.url }}" title="{{ entry.title }}" hx-get="{{ entry.url }}" hx-target="#app-content" hx-swap="innerHTML" hx-push-url="true"
                 {% if selected %}aria-current="page"{% endif %}
                 class="overseer-rail-row nav-link relative py-2">
            {{ sidebar_icon(entry.name) }}
            <span class="overseer-rail-hide truncate flex-1">{{ entry.title }}</span>
            <span class="overseer-rail-status inline-flex items-center gap-0.5 shrink-0" sse-swap="{{ entry.event }}" hx-target="this">
              {% set health_status = entry.status %}{% include "pages/overseer/_status_dot.html" %}
            </span>
          </a></li>
          {% endfor %}
        </ul>
      </section>
      {% endif %}
      {% endfor %}
    </nav>
    <div class="hidden md:block shrink-0 border-t border-aegis-border px-3 py-3">
      <button type="button" aria-controls="overseer-sidebar"
              :aria-expanded="sidebar === 'wide'"
              :aria-label="sidebar === 'rail' ? 'Expand sidebar' : 'Collapse sidebar'"
              @click="sidebar = sidebar === 'rail' ? 'wide' : 'rail'; setAppearance('sidebar', sidebar)"
              class="overseer-rail-row flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-aegis-muted hover:text-aegis-text hover:bg-aegis-border/20 transition-colors">
        <svg class="h-5 w-5 shrink-0 transition-transform" :class="sidebar === 'rail' ? 'rotate-180' : ''"
             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M15.75 19.5 8.25 12l7.5-7.5"/>
        </svg>
        <span class="overseer-rail-hide">Collapse</span>
      </button>
      <div class="mt-2 border-t border-aegis-border pt-3 space-y-3">
        <div class="flex items-center justify-between gap-2">{{ theme_toggle("up", rail=True) }}<a href="/logout" class="overseer-rail-none text-xs text-aegis-muted hover:text-aegis-text">Sign out</a></div>
        <p class="overseer-rail-none text-xxs text-aegis-muted truncate">{{ user.email }}</p>
      </div>
    </div>
  </aside>
  {# Everything right of the main sidebar. A page's sub-menu and content
     swap together as this one element, so the sidebar never re-renders. #}
  <div id="overseer-main" class="min-w-0 flex-1 md:flex">
    {% block overseer_subnav %}{% endblock %}
    <div class="min-w-0 flex-1">
      <div class="md:hidden flex items-center justify-between gap-3 px-5 py-3 border-b border-aegis-border">
        {{ theme_toggle() }}<a href="/logout" class="text-xs text-aegis-muted hover:text-aegis-text">Sign out</a>
      </div>
      <div class="max-w-screen-xl mx-auto px-5 sm:px-8 lg:px-10 py-7 lg:py-10">
        {% block overseer_content %}{% endblock %}
      </div>
    </div>
  </div>
</div>
{% if chat_path is defined %}{% include "components/chat_drawer.html" %}{% endif %}
{% endblock %}